<template>
  <!-- 面包屑 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card>
    <el-form label-width="auto" style="max-width: 700px">
      <el-form-item>
        <el-input size="large" style="width: 500px" v-model="wang.query" placeholder="请输入内容" />
        <el-button :icon="Search" style="width: 50px" size="large" @click="query" />
        <el-button type="primary" size="large" class="box_button" @click="$router.push({ name:'goodsadd' })">添加用户</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="goods" border style="width: 100%" class="table">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="goods_name" label="商品名" />
      <el-table-column prop="goods_price" label="价格(元)" width="80" />
      <el-table-column prop="goods_weight" label="重量(kg)" width="80" />
      <el-table-column prop="add_time_data" label="创建时间" width="100" />
      <el-table-column label="操作" width="80" />
    </el-table>
    <!-- size-change	page-size 改变时触发   current-change	current-page 改变时触发  v-model:page-size	每页显示条目个数  v-model:current-page	当前页数-->
    <el-pagination v-model:current-page="wang.pagenum" v-model:page-size="wang.pagesize" :page-sizes="[1, 3, 5, 10]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
  </el-card>
</template>
<script setup lang="ts">
// 引入
import request from "@/util/request";
import { ArrowRight } from '@element-plus/icons-vue'
import { responseUserData } from '@/api/user/type'
// 搜索框
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const input3 = ref('')
const wang = ref({
  query: '',
  pagenum: 1,
  pagesize: 20
})
const total = ref(0)
let goods = ref([])

const getRightList = async () => {
  const { data, meta }: responseUserData = await request({
    url: `goods`,
    method: 'GET',
    params: wang.value,
  })
  if (meta.status !== 200) {
    return ElMessage.error('网络异常,稍后重试')
  }
  total.value = data.total
  console.log(data, meta)
  goods.value = data.goods
  ElMessage.success(meta.msg)

}


const handleSizeChange = (size: any) => {
  wang.value.pagesize = size
  getRightList()
}
const handleCurrentChange = (page: any) => {
  wang.value.pagenum = page
  getRightList()
}
const query = () => {
  // 每次搜索,页数从1开始
  wang.value.pagenum = 1
  console.log()
  getRightList()
}

onMounted(() => {
  getRightList()
})




</script>

<style scoped>
.el-card {
  margin-top: 20px;
}

.el-button {
  right: 20px;
}

.my_button {
  margin-left: 30px;
}

.table {
  margin-top: 20px;
}
</style>
